<template>
  <div class="item" v-if="item">
    <img :src="'https://images.weserv.nl?url=' + item.images.large" alt="" />
    <div>
      <p>豆瓣评分：{{ item.rating.average }}</p>
      <p>产地：{{ item.countries[0] }}</p>
      <p>
        <span v-for="(item, i) in item.genres" :key="i" class="tag">{{
          item
        }}</span>
      </p>
      <p>{{ item.summary }}</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  created() {
    this.getItemData(this.$route.params.id);
  },
  computed: {
    ...mapState(["item"])
  },
  methods: {
    ...mapActions(["getItemData"])
  }
};
</script>

<style scoped></style>
